<template>

<!-- <el-dialog
        class="ba-operate-dialog"
        :close-on-click-modal="false"
        :model-value="props.live_id > 0"
        @close="baTable.toggleForm"
        width="80%" 
        :before-close="close"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                直播记录详情
            </div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar" style=""> -->
            <el-row :gutter="20" style="background: #fff; margin: 16px 16px 0 16px; padding: 6px; border-radius: 3px; padding-bottom: 16px;">
                <el-col :span="24" style="font-size: 16px; font-weight: 700; margin-bottom: 5px;">订单详情</el-col>
                <el-col :span="6" style="margin-top: 10px;"><span style="margin-right: 10px;">订单编号:</span><span>{{ state.out_trade_no }}</span></el-col>
                <el-col :span="6" style="margin-top: 10px;"><span style="margin-right: 10px;">客户名:</span><span>{{ state.user.username }}</span></el-col>
                <el-col :span="6" style="margin-top: 10px;"><span style="margin-right: 10px;">下单时间:</span><span>{{ state.order.place_order_time }}</span></el-col>
                <el-col :span="6" style="margin-top: 10px;"><span style="margin-right: 10px;">订单状态:</span><span>{{ state.order.status_text }}</span></el-col>
                <el-col :span="6" style="margin-top: 10px;"><span style="margin-right: 10px;">订单总价:</span><span>{{ state.order.total_price }}</span></el-col>
            </el-row>
            
            <div class="default-main ba-table-box">
                <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

                <!-- 表格顶部菜单 -->
                <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
                <!-- <TableHeader
                    :buttons="['delete']"
                    :quick-search-placeholder="t('客户名/主播名')"
                >
                </TableHeader> -->

                <!-- 表格 -->
                <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
                <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
                <Table ref="tableRef" :pagination="false">
                    <template #live_number>
                        <!-- 在插槽内，您可以随意发挥，通常使用 el-table-column 组件 -->
                        <el-table-column prop="id" label="直播编号" align="center">
                            <template #default="scope">
                                <div class="live-number" @click="detail(scope.row.id)">
                                    {{ scope.row.live_number }}
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                </Table>
                
            </div>
        <!-- </el-scrollbar>
        
    </el-dialog> -->
</template>

<script setup lang="ts">
import { ref, provide, onMounted, markRaw, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
// import router from '/@/router'

import { useRoute } from 'vue-router'

const route = useRoute()

import OrderNum from './render/order_num.vue';

defineOptions({
    name: 'orderDetail',
})

// interface Props {
//     live_id: number
// }

// const props = defineProps<Props>()

const { t } = useI18n()

const emit = defineEmits(["hideDetail"])

// 关闭弹窗
// const close = (done: () => void) => {
//     emit("hideDetail")
//     done()
    
// }

const state = reactive({
    out_trade_no: 0,
    order: {
        
    },
    user: {
        username: ''
    }
})



const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['delete'])
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/order.Detail/'),
    {
        pk: 'temp_id',
        column: [
            // { type: 'selection',  align: 'center', operator: false },
            { 
                label: t('品牌名'), 
                prop: 'brand.name', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false,
                width: 150,
            },
            { 
                label: t('图片'), 
                render: "image", 
                prop: 'goods.cover', 
                align: 'center', 
                operatorPlaceholder: t('Fuzzy query'), 
                operator: 'LIKE', 
                sortable: false,
                width: 120
            },
            { label: t('商品名'), prop: 'goods.name', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('颜色'), prop: 'color', align: 'center', render: 'string', operator: false },
            { label: t('尺寸'), prop: 'size', align: 'center', render: 'string', operator: false },
            { label: t('采购价'), prop: 'purchase_price', align: 'center', operator: 'RANGE', sortable: false },
            { 
                label: t('数量'), 
                prop: 'num', 
                align: 'center', 
                operator: 'RANGE', 
                sortable: false,
                render: 'customRender', 
                customRender: markRaw(OrderNum),
            },
            { label: t('总价'), prop: 'total_price', align: 'center', operator: 'RANGE', sortable: false },
            
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: { user_id: null, brand_id: null, goods_ids: null, anchor: null, live_time: 0 },
    },
    {
        getIndex: ({ res }: { res: ApiResponse }) => { // 查看前
            // console.log(res)
        },
    },
    {
        getIndex: ({ res }: { res: ApiResponse }) => { // 查看后
            console.log(res)
            state.user = res.data.user;
            state.order = res.data.order;
        },
    }
)

provide('baTable', baTable)

onMounted(() => {
    state.out_trade_no = route.params.out_trade_no
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.table.filter!.out_trade_no = state.out_trade_no;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})
</script>

<style scoped lang="scss">

.live-number{
    cursor: pointer;
}
.live-number:hover{
    text-decoration: underline;
}

:deep(.el-image){
    width: 70px;
    height: unset;
}

</style>
